<template>
    <div class="grossContainer">
        <el-row class="item">
            <el-col :span="24" :offset="0">
                <el-upload :action="attachmentUploadUrl" :file-list="attachmentList" :accept="attachmentTip"
                    :before-upload="beforeAttachmentUpload" :on-preview="attachmentPreview" :on-success="attachmentUploaded"
                    :before-remove="beforeRemove" :on-remove="fileRemoved" list-type="picture-card">
                    <el-button size="small" type="primary">上传大体标本图片</el-button>
                    <div slot="tip" class="el-upload__tip">{{ attachmentTip }}</div>
                </el-upload>
            </el-col>
        </el-row>
        <el-form label-width="68px">
            <el-form-item label="巨检描述" prop="remark">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" class="idNumtext0" v-model="remark">
                </el-input>

            </el-form-item>
        </el-form>
        <el-row class="item">
            <el-col :span="24" :offset="0">
                <el-upload :action="attachmentUploadUrl" :file-list="attachmentList" :accept="attachmentTip"
                    :before-upload="beforeAttachmentUpload" :on-preview="attachmentPreview" :on-success="attachmentUploaded"
                    :before-remove="beforeRemove" :on-remove="fileRemoved">
                    <el-button size="small" type="primary">上传大体标本3D资料</el-button>
                    <div slot="tip" class="el-upload__tip">{{ attachmentTip }}</div>
                </el-upload>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'grossSpecimen',
    props: {
        data: {
            type: Array,
            default: [],
        },
        diagnosisId: [Number, String],
    },
    data() {
        return {
            remark: '',
            DicomPreviewURL: process.env.VUE_APP_dicomViewerURL, // diocm查看地址
            attachmentUploadUrl: `${process.env.VUE_APP_ImageServiceURL}/upload`,
            dicomUploadUrl: `${process.env.VUE_APP_dicomUploadURL}/dicom-upload`,
            attachmentTip: '*(支持 .jpeg/.png/.gif 等格式的文件)',
            attachmentAccept: 'image/gif,image/jpeg,image/png',
        };
    },
    computed: {
        attachmentList() {
            if (this.data.length > 0) {
                const data = [];
                this.data.forEach((item) => {
                    if (item.type !== 0) {
                        const attachment = {
                            id: item.id,
                            name: item.description,
                            url: item.url,
                            type: item.type,
                        };
                        data.push(attachment);
                    }
                });
                return data;
            }
            return [];
        },
    },
    methods: {

        beforeAttachmentUpload(file) {
            const isGIF = file.type === 'image/gif';
            const isJPEG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isPDF = file.type === 'application/pdf';

            if (!isGIF && !isJPEG && !isPNG && !isPDF) {
                this.$message.warning('文件格式不正确！');
                return false;
            }

            if (this.data.find((item) => item.description === file.name)) {
                this.$message.warning('文件名重复！');
                return false;
            }
            return true;
        },
        async attachmentUpload(file) {
            const attachment = file;
            try {
                await this.$axios({
                    method: 'POST',
                    url: '/attachment',
                    data: attachment,
                }).then((res) => {
                    if (res.data.code === 200) {
                        console.log('upload success', res.data);
                        attachment.id = res.data.data.id;
                        this.data.push(attachment);
                    }
                });
            } catch (e) {
                throw new Error(e);
            }
        },
        async attachmentRemove(attachmentId) {
            // try {
            //     await this.$axios({
            //         method: 'DELETE',
            //         url: `/attachment/${attachmentId}`,
            //     }).then((res) => {
            //         if (res.data.code === 200) {
            //             console.log('delete success');
            //         }
            //     });
            // } catch (e) {
            //     throw new Error(e);
            // }
        },

        attachmentUploaded(file) {
            const item = {
                description: file.name,
                type: 1,
                url: file.url,
            };
            if (this.diagnosisId !== 0) {
                //item.diagnosisId = this.diagnosisId;
                //   this.attachmentUpload(item);
            } else {
                this.data.push(item);
            }
        },

        attachmentPreview(file) {
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(file.url, '_blank', `location=no,width=${width},height=${height}`);
        },
        beforeRemove(file) {
            if (file && file.status === 'success') {
                return this.$confirm(`确定移除 ${file.name}？`);
            }
            return true;
        },
        fileRemoved(file) {
            if (file && file.status === 'success') {
                _.remove(
                    this.data,
                    (item) =>
                        item.description === file.name &&
                        item.type === file.type
                );
                if (this.diagnosisId !== 0) {
                    this.attachmentRemove(file.id);
                }
            }
        },
    },
};
</script>

<style scoped>
.item {
    margin-top: 10px;
    position: relative;
    padding-top: 60px;
}



.grossContainer .item ::v-deep .el-upload {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 32px;
    width: auto;
    line-height: 32px;
    border: none;
}

::v-deep .el-upload-list__item-thumbnail {
    object-fit: cover;
}

::v-deep .el-upload__tip {
    position: absolute;
    top: 0px;
    left: 150px;
    height: 32px;
    line-height: 32px;
    margin-top: 0px;
    color: red;
}

.header {
    margin-top: 20px;

    font-size: 14px;
}

.pathology-preview img {
    width: 146px;
    height: 146px;
}

.pathology-preview a,
.pathology-preview div {
    float: left;
}

.pathology-preview div.pathology-info {
    margin-left: 10px;
}
</style>
